<template>
	<view class="user">
		

		<!-- 未登录 -->
		<view class="user-unlogin" v-if="!userStore.isLogin">
			<view class="user-header">
				<public-header></public-header>
				<view class="user-unlogin__header flex">
					<image src="/static/images/userAvatar.jpg" mode="aspectFill" class="user-unlogin__user-avatar"></image>
					<button class="user-unlogin__login-btn flex" @click="onClickLogin">登录</button>
				</view>
			</view>

			
			<view class="user-unlogin__main">
				<view class="user-unlogin__main-tips">没有个人信息！</view>
			</view>
		</view>
		
		<view class="user-login" v-else>
			<view class="user-header">
				<public-header></public-header>
				<view class="user-login__header flex">
					<view class="user-login__info flex">
						<image src="/static/images/userAvatar.jpg" mode="aspectFill" class="user-login__info-avatar"></image>
						<view class="flex-column">
							<view class="user-login__info-name">
								<text>{{userStore.userInfo.username}}</text>
								<image :src="userStore.userInfo.gender === '女' ? '/static/images/female.png' : '/static/images/male.png'" mode="aspectFill" class="user-login__info-name-icon"></image>
							</view>
							
							<text class="user-login__info-desc">{{userStore.userInfo.intro || '没有个人简介'}}</text>
						</view>
					</view>

					<view>
						<view class="user-login__setting-btn flex" @click="onClickToDetail" style="margin-bottom: 20rpx;">
							<image src="/static/images/kefu.png" mode="aspectFill" class="user-login__setting-btn-icon"></image>
							<text>客服</text>
						</view>

						<view class="user-login__setting-btn flex" @click="onClickToSetting">
							<image src="/static/images/setting.png" mode="aspectFill" class="user-login__setting-btn-icon"></image>
							<text>设置</text>
						</view>
					</view>
					

				</view>
			</view>

			<view class="user-login__main">
				<view class="user-login__pending">
					<user-pending-item 
						v-for="item in lostItems" 
						:key="item.id" 
						:data="item.data"
						:itemId="item.id"
						@delete-item="handleDeleteItem"
					></user-pending-item>
				</view>
				
				<view class="user-login__option">
					<view class="user-login__option-item flex">
						<view class="user-login__option-desc flex" @click="onClickToMessage">
							<image src="/static/images/message.png" mode="aspectFill" class="user-login__option-icon"></image>
							<text>消息</text>
						</view>
						
						<image src="/static/images/rightArrow.png" mode="aspectFill" class="user-login__option-arrow"></image>
					</view>
					
					<view class="user-login__option-item flex" @click="onClickShowHelp">
						<view class="user-login__option-desc flex">
							<image src="/static/images/help.png" mode="aspectFill" class="user-login__option-icon"></image>
							<text>帮助</text>
						</view>
						
						<image src="/static/images/rightArrow.png" mode="aspectFill" class="user-login__option-arrow"></image>
					</view>
					
					<view class="user-login__option-item flex" @click="onClickShowAbout">
						<view class="user-login__option-desc flex">
							<image src="/static/images/information.png" mode="aspectFill" class="user-login__option-icon"></image>
							<text>关于</text>
						</view>
						
						<image src="/static/images/rightArrow.png" mode="aspectFill" class="user-login__option-arrow"></image>
					</view>
				</view>
				
				<!-- 遮罩层部分 -->
				<!-- 帮助的遮罩层 -->
				<van-overlay @click="onClickHideHelp" :show="showHelp">
					<view class="user-login__help">
						<view class="user-login__help-overlay">
							<view class="user-login__help-title">帮助中心</view>
							
							<view class="user-login__help-content flex-column">
								<text class="user-login__help-content-title">1.失物招领的认领流程如下：</text>
								<text>联系发布者，验证物品信息，商量归还方式和地点</text>
							</view>
							
							<view class="user-login__help-content flex-column">
								<text class="user-login__help-content-title">1.失物招领的认领流程如下：</text>
								<text>联系发布者，验证物品信息，商量归还方式和地点</text>
							</view>
						</view>
					</view>

				</van-overlay>
				
				<van-overlay @click="onClickHideAbout" :show="showAbout">
					<view class="user-login__about">
						<view class="user-login__about-overlay">
							<view class="user-login__about-logo-box">
								<image src="/static/images/userAvatar.jpg" mode="aspectFill" class="user-login__about-logo"></image>
							</view>
							
							<view class="user-login__about-title flex-column">
								<text>小程序</text>
								<text class="user-login__about-sub-title">校园失物招领</text>
							</view>
							
							<view class="user-login__about-remark flex-column">
								<text>开发人员：华南师范大学XXX</text>
								<text>联系方式：2498247765@qq.com</text>
							</view>
							
						</view>
					</view>
				</van-overlay>
			</view>
		</view>
		
	</view>
</template>

<script setup>
	import { ref, onMounted} from 'vue';
	import publicHeader from '@/components/publicHeader/publicHeader.vue';
	import userPendingItem from '@/components/userPendingItem/userPendingItem.vue'
	import { getUserInfo, userLogout } from '@/utils/apis.js';
	import { onShow } from '@dcloudio/uni-app';
	import { userStore } from '@/store/userStore.js';

	function onClickToDetail(){
		// console.log('点击消息详情');
		let id=1,messageName = '客服'
		uni.navigateTo({
			url:`/pages/user/userMessage/userMessageDetails/userMessageDetails?id=${id}&messageName=${messageName}`
		})
	}

	const showHelp = ref(false);
	const showAbout = ref(false);

	const lostItems = ref([
		{
			id: 'lostItems001',
			data: {
				image: 'http://localhost:3000/images/items/白色水杯.jpg',
				name: '白色水杯',
				status: '待寻找',
				date: '2025-01-08',
				type: '生活用品'
			}
		},
		{
			id: 'lostItems002', 
			data: {
				image: 'http://localhost:3000/images/items/白色衣架.jpg',
				name: '白色衣架',
				status: '待寻找',
				date: '2025-01-07',
				type: '电子设备'
			}
		},
		{
			id: 'lostItems003',
			data: {
				image: 'http://localhost:3000/images/items/绿色雨伞.jpg',
				name: '绿色雨伞',
				status: '待寻找',
				date: '2025-01-05',
				type: '生活用品'
			}
		}
	])
	
	// 处理删除项目
	function handleDeleteItem(itemId) {
		console.log('删除项目:', itemId);
		// 从lostItems数组中过滤掉要删除的项目
		lostItems.value = lostItems.value.filter(item => item.id !== itemId);
		
		// 显示删除成功提示
		uni.showToast({
			title: '删除成功',
			icon: 'success'
		});
	}
	
	// 检查登录状态
	async function checkLoginStatus() {
		// 初始化用户信息
		userStore.initUserInfo();
		
		// 如果已经初始化了用户信息，则不需要再检查
		if (userStore.isLogin) {
			return;
		}
		
		// 如果没有用户信息,再检查token
		const token = uni.getStorageSync('token')
		if(!token) {
			userStore.setLoginStatus(false);
			return;
		}
		
		try {
			const res = await getUserInfo()
			if(res.code === 200) {
				// 更新全局用户信息
				Object.assign(userStore.userInfo, res.data.userInfo);
				userStore.setLoginStatus(true);
			} else {
				userStore.setLoginStatus(false);
			}
		} catch(e) {
			userStore.setLoginStatus(false);
		}
	}
	
	
	onMounted(() => {
		checkLoginStatus()
	})
	
	// 每次页面显示时检查登录状态
	onShow(() => {
		checkLoginStatus()
	})
	
	function onClickLogin(){
		uni.navigateTo({
			url:'/pages/login/login',
			success: () => {
				console.log('成功跳转到登录页面!');
			},
			fail: () => {
				console.log('失败跳转到登录页面！');
			}
		})
	}
	
	function onClickShowHelp(){
		showHelp.value = true;
	}
	
	function onClickHideHelp(){
		showHelp.value = false;
	}
	
	function onClickShowAbout(){
		showAbout.value = true;
	}
	
	function onClickHideAbout(){
		showAbout.value = false;
	}
	
	function onClickToSetting(){
		uni.navigateTo({
			url:'/pages/user/userSetting/userSetting',
			success: () => {
				console.log('跳转到用户设置页面成功！');
			},
			fail: () => {
				console.log('跳转到用户设置页面失败！');
			}
		})
	}
	
	function onClickToMessage(){
		uni.navigateTo({
			url:'/pages/user/userMessage/userMessage',
			success: () => {
				console.log('跳转到用户消息页面成功！');
			},
			fail: () => {
				console.log('跳转到用户消息页面失败！');
			}
		})
	}
</script>

<style lang="scss" scoped>
.user{
	width: 100%;
	height: 100%;
	// background-color: #81d3f8;
	background-color: #fff;
	&-header{
		background-color: #81d3f8;
	}
	&-unlogin{
		width: 100%;
		height: 100%;
		// background-color: #fff;
		
		&__header{
			width: 100%;
			background-color: #81d3f8;
			box-sizing: border-box;
			// padding-top: 150rpx;
			padding-bottom: 90rpx;
		}
		
		&__user-avatar{
			width: 140rpx;
			height: 140rpx;
			margin-left: 60rpx;
			margin-right: 66rpx;
		}
		
		&__login-btn{
			width: 183rpx;
			height: 80rpx;
			background-color: #fff;
			border-radius: 30rpx;
			font-size: 28rpx;
			color: #333333;
			justify-content: center;
		}
		
		&__main{
			// height: 100%;
			background-color: #fff;
			// margin-top: -10rpx;
			border-top-right-radius: 20rpx;
			border-top-left-radius: 20rpx;
			box-sizing: border-box;
			padding-top: 356rpx;
			&-tips{
				width: fit-content;
				margin: 0 auto;
			}
		}
	}
	
	&-login{
		width: 100%;
		height: 100%;
		background-color: #f2f2f2;
		
		&__header{
			width: 100%;
			background-color: #81d3f8;
			box-sizing: border-box;
			// padding-top: 150rpx;
			padding-bottom: 90rpx;
			justify-content: space-between;
		}
		
		&__info{
			
			&-avatar{
				width: 140rpx;
				height: 140rpx;
				margin-right: 19rpx;
				margin-left: 60rpx;
			}
			
			
			&-name{
				font-size: 36rpx;
				color: #333333;
				margin-bottom: 20rpx;
				&-icon{
					width: 25rpx;
					height: 25rpx;
				}
			}
			
			&-desc{
				font-size: 24rpx;
				color:rgba(48, 48, 48, 0.7);
			}
		}
		
		&__setting-btn{
			width: 150rpx;
			height: 62rpx;
			margin-right: 30rpx;
			background-color: #fff;
			font-size: 28rpx;
			color: #333333;
			border-radius: 30rpx;
			justify-content: center;
			&-icon{
				width: 35rpx;
				height: 35rpx;
				margin-right: 10rpx;
			}
		}
		
		
		&__main{
			background-color: #f2f2f2;
			margin-top: -10rpx;
			border-top-right-radius: 20rpx;
			border-top-left-radius: 20rpx;
			box-sizing: border-box;
			padding-top: 30rpx;
		}
		
		&__pending{
			width: 690rpx;
			margin: 0 auto;
			// padding: 30rpx 0;
			padding-top: 30rpx;
			padding-bottom: 6rpx; //由于子组件有24rpx的margin-bottom
			background-color: #fff;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
		}
		
		&__option{
			width: 690rpx;
			margin: 0 auto;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 20rpx 0;

			&-item{
				width: 100%;
				height: 30rpx;
				justify-content: space-between;
				margin-bottom: 32rpx;
				&:nth-last-child(1){
					margin-bottom: 0;
				}
			}
			
			&-desc{
				font-size: 24rpx;
				color: #333333;
				margin-left: 46rpx;
			}
			
			&-icon{
				width: 30rpx;
				height: 30rpx;
				margin-right: 24rpx;
			}
			
			&-arrow{
				width: 30rpx;
				height: 30rpx;
				margin-right: 25rpx;
			}
		}
		
		// 帮助的遮罩层
		&__help{
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			&-overlay{
				width: 600rpx;
				height: 663rpx;
				background-color: #fff;
				border-top-left-radius: 30rpx;
				border-bottom-right-radius: 30rpx;
				box-sizing: border-box;
				padding-top: 45rpx;
				padding-left: 50rpx;
				padding-right: 20rpx;
			}
			
			&-title{
				font-size: 36rpx;
				font-weight: 700;
				color: #333333;
				margin-bottom: 45rpx;
			}
			
			&-content{
				font-size: 24rpx;
				color: #333333;
				margin-bottom: 40rpx;
				
				&-title{
					font-weight: 700;
				}
			}
		}
		
		&__about{
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			&-overlay{
				width: 600rpx;
				height: 663rpx;
				background-color: #fff;
				border-top-left-radius: 30rpx;
				border-bottom-right-radius: 30rpx;
				box-sizing: border-box;
				padding-top: 64rpx;
				position: relative;
			}
			
			&-logo-box{
				width: 170rpx;
				height: 170rpx;
				margin: 0 auto;
				margin-bottom: 30rpx;
			}
			
			&-logo{
				width: 100%;
				height: 100%;
			}
			
			
			&-title{
				width: fit-content;
				margin: 0 auto;
				text-align: center;
				font-size: 36rpx;
				color: #333333;
				font-weight: 700;
			}
			
			&-sub-title{
				font-size: 28rpx;
				font-weight: 200;
				display: inline-block;
				margin-top: 17rpx;
			}
			
			&-remark{
				font-size: 28rpx;
				color: #333333;
				position: absolute;
				left: 60rpx;
				bottom: 44rpx;
			}
		}
	}

}
</style>
